@media (max-width: 1125px) {
    .banner_wrap .banner_box{
        top: 4%;
    }
}

@media (max-width: 992px) {
    .banner_right{
        display: none;
    }
    .top_left,.top_right{
        display: none;
    }
   .top_logo{
        float: none;
        padding-left: 43%;
    }
   .banner .closed{
       display: block;
   }
    body .banner_wrap{
        background-color: #FFFFFF;
        padding: 0;
    }
    .banner_wrap .banner_box{
        /*width: 50%;*/
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
    }
}

@media (max-width: 765px) {
    /*.hungry .btn_two{*/
    /*    margin-top: 4px;*/
    /*}*/
    .hungry .ribbon{
        display: none;
    }
    .something_new>div{
        padding-top: 60px;
    }
}

/*ico图标*/
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
/*头部header*/
header{
    /*background-color: #c1e2b3;*/
    height: 105px;
    border-bottom: 1px solid #EEEEEE;
}
nav{
    margin-top: 20px;
    height: 62px;
    /*background-color: #2b542c;*/
}
nav a:hover{
     /*    出现下划线*/
     text-decoration: underline;
}
.top_logo{
    float: left;
}
.top_logo img{
    height: 60px;
}
.top_left{
    float: left;
    /*background-color: #d58512;*/
}
.top_left a{
    color: #444444;
}
.top_left li:nth-of-type(4){
     margin-left: 25px;
}
.top_left .active a{
    color: #0AA550;
}
.top_left,.top_right{
    height: 47px;
    margin-top: 15px;
    margin-left: 15px;
}
.top_left li,.top_right li{
    float: left;
    /*border: 1px solid yellowgreen;*/
    margin-right: 10px;
    font-size: 16px;
    line-height: 27px;
    padding: 10px;
}
.top_left a,.top_right a{
    color: #444444;
    font-size: 17px;
    font-weight: bold;
    font-family: sofiapro,Helvetica Neue,Helvetica,Arial,sans-serif;
}
.top_right{
    float: right;
    /*background-color: #5bc0de;*/
}
.top_right .uk{
     line-height: 27px;
     padding-top: 10px;
     padding-bottom: 0;
 }
.top_right p>span{
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-right: 5px;
    background: url("../images/shop/united-kingdom.svg");
}
.top_right p>b{
    font-weight: normal;
}
/*下拉菜单*/
.uk a:hover{
    color: #757575;
    text-decoration: underline;
    opacity: 0.8;
}
.uk>p{
    margin: 0;
    padding: 0 10px;
}
.uk>p>a{
    float: right;
}
.uk p span{
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-right: 5px;
    background: url("../images/shop/united-kingdom.svg");
}
/*ol里的内容*/
.changelang{
    display: none;
    overflow: hidden;
    padding: 10px;
    position: relative;
    top: 36px;
    left: 70%;
    z-index: 1;
    background-color: #FFFFFF;
    border: 1px solid #EEE;
}
.changelang span{
    width: 15px;
    height: 15px;
    display: inline-block;
    margin-right: 5px;
}
.ico_one{
    background: url("../images/ireland.svg");
}
.ico_two{
    background: url("../images/netherlands.svg");
}

/*banner内容*/
.banner{
    font-size: 18px;
    line-height: 68px;
}
.banner .container{
    position: relative;
    font-weight: bold;
    padding: 0;
}
.banner_left{
    height: 68px;
    position: relative;
}
.banner_left p{
    margin: 0 4% 0;
}
.shop_dropdownmenu{
    background-color: #FFFFFF;
    border-top:1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    position: absolute;
    z-index: 1;
    width: 100%;
    display: none;
    padding: 0;
}
.shop_dropdownmenu li>a,.banner_left p>a{
    color: #444444;
}
.shop_dropdownmenu li a:hover,.banner_left p>a:hover{
    color: #959595;
    text-decoration: none;
}
.toggle_block{
    display: block;
}
.toggele_none{
    display: none;
}
.closed{
    height: 47px;
    background-color: #ddd;
    text-align: center;
    line-height: 47px;
    display: none;
}
.banner_right{
    height: 68px;
    position: absolute;
    top: 0%;
    right: 3%;
}
/*中间大图片以及上面的div*/
.banner_wrap{
    position: relative;
    background-color: #F8F8F8;
}
.banner_img{
    height: 550px;
    background: url("../images/graze_subscribe_hero_m.jpg") no-repeat;
    background-position:center right;
    background-size: cover;
}
.banner_box{
    width: 35%;
    padding: 10px;
    background-color: rgba(255,255,255,.9);
    position: absolute;
    top: 13%;
    left: 17%;
    padding-bottom: 20px;
    border-radius: 1rem;
    text-align: center;
}
.banner_box h2{
    font-size: 38px;
}
.banner_box h4{
    line-height: 30px;
    padding: 20px 0 10px;
}
.banner_box .btn{
    padding: 10px 30px;
    margin: 0 0 20px;
    background-color: #0AA550;
    border:solid 2px #0AA550;
    font-size: 18px;
    border-radius: 2rem;
}
.banner_box .btn:hover{
    background-color: #fff;
    color: #0AA550;
    transition: all 2s;
}

/*cont部分*/
.cont{
    text-align: center;
    background-color: #F8F8F8;
}
.cont h2{
    padding-top: 20px;
}
.cont h3{
    font-size: 20px;
    margin: 0;
    font-weight: bold;
    padding: 10px 0;
}
.cereal_bars .container{
    padding: 0;
    overflow-x: auto;
}
.cereal_bars ul{
    overflow: hidden;
    width: 1230px;
}
.cereal_bars ul>li{
    float: left;
    margin-right: 10px;
}
.bars_cont{
    background-color:#FFFFFF;
    border-bottom-right-radius:1rem;
    border-bottom-left-radius: 1rem;
}
.cereal_bars ul>li p{
    font-size: 17px;
    font-weight: bold;
}
.price{
    padding: 10px;
    overflow: hidden;
}
.price span{
    float: left;
}
.price button{
    float: right;
}
.price_one{
    padding: 40px 10px 15px;
}
.cereal_bars>div ul>li>img{
    width: 285px;
    height: 285px;
    border-radius: 1rem 1rem 0 0;
}
.cereal_bars .btn{
    font-weight: 400;
    font-size: 18px;
    background-color: #0aa550;
    padding: .565em 1em;
    color: #FFFFFF;
    border-color: #0aa550;
    border-radius: 1em;
    font-family:sofiapro,Helvetica Neue,Helvetica,Arial,sans-serif ;
}
.cereal_bars .btn:hover{
    background-color: #fff;
    color: #0AA550;
    transition: all 2s;
}
/*hungry more*/
.hungry ul li{
    position: relative;
}
.hungry ul li>img{
    width: 100%;
}
.ribbon{
    display: block;
    width: 204px;
    height: 36px;
    position: absolute;
    left: -.25em;
    top: 2rem;
    padding: .5em;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    color: #FFFFFF;
    font-size: 18px;
    line-height: 18px;
    text-transform: lowercase;
    background-color: #e346a0;
}
.ribbon:after{
    content: "";
    width: 1em;
    position: absolute;
    top: 0;
    right: -.5em;
    border:solid transparent;
    border-left: none;
    border-top: 1em solid;
    border-bottom: 1em solid;
    border-right-width: .4em;
    border-top-color:#e346a0;
    border-bottom-color:#e346a0;
}
.hungry_cont{
    background-color: #FFFFFF;
    position: relative;
    top: 0%;
    padding-bottom: 20px;
}
.hungry_cont >p{
    font-size: 18px;
    line-height: 26px;
}
.hungry_cont .btn{
    font-weight: 400;
    font-size: 18px;
    background-color: #0aa550;
    padding: .565em 1em;
    color: #FFFFFF;
    border-color: #0aa550;
    border-radius: 2em;
    font-family:sofiapro,Helvetica Neue,Helvetica,Arial,sans-serif ;
}
.btn_two{
    margin-top: 26px;
}
.btn_three{
    margin-top: 26px;
}
.hungry ul .btn:hover{
    background-color: #fff;
    color: #0AA550;
    transition: all 2s;
}
/*tip*/
.tip{
    font-size: 1.8rem;
    font-family: sofiapro,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    margin: 40px 0;
}

/*something news*/
.something_new{
    /*height: 360px;*/
    background-color: #009ba4;
    padding: 2rem;
    color: #fff;
}
.something_new img{
    /*height: 313px;*/
    width: 100%;
}
.somethingnew_right{
    padding: 60px 0;
}
.somethingnew_right .btn{
    color: #009ba4;
    background-color: #FFFFFF;
    font-size: 1.8rem;
    padding: .565em 1em;
    line-height: 1;
    font-family: sofiapro,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-weight: 700;
    border-radius: 2em;
    border: .3rem solid #009ba4;
}
.somethingnew_right .btn:hover{
    background-color: #009ba4;
    color: #FFFFFF;
    border-color: #FFFFFF;
    transition: all 2s;
}

/*instagram*/
.instagram{
    text-align: center;
}
.instagram ul{
    /*border: 1px solid red;*/
    overflow: hidden;
    padding: 0;
}
.instagram ul li{
    opacity: 0.1;
    height: 160px;
    background-color: #8E8E8E;
    float: left;
    position: relative;
}
/*.instagram ul li:after{*/
/*    background-image: url("../images/instagram-icon.svg");*/
/*    background-size: 20px 20px;*/
/*    position: absolute;*/
/*    z-index: 100;*/
/*    content: '';*/
/*    opacity: 1;*/
/*}*/
.instagram ul li:hover{
    opacity: 1;
    transition: all 2s;
}


/*尾部*/
footer{
    color: #757575;
    text-align: center;
}
footer>p:nth-of-type(1){
    margin: 70px 0 20px;
    /*background-color: #761c19;*/
}
.footer_con{
    /*width: 940px;*/
    margin: 0 auto;
}

.title{
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
}
.title ul{
    overflow: hidden;
}
.title li{
    float: left;
    height: 50px;
    line-height: 42px;
    padding: 8px;
    font-size: 18px;
    /*font-weight: bold;*/
    color: #444444;
}
.des{
    /*margin: 0 auto;*/
    overflow: hidden;
    text-align: center;
    font-size: 16px;
}
.des li{
    float:left;
    margin-right: 18px;
}
.des li>a{
    color:#757575 ;
}

.footer_con p{
    font-size: 16px;
    color: #7a7a7a;
}
